<template>
  <el-dialog v-if="visible" v-dialogDrag modal :visible.sync="visible" :close-on-click-modal="false" width="70%">
    <div slot="title" class="dialog-header">到货确认详情</div>
    <div class="table-name-content">到货确认详情</div>
    <wz-table :columns="mcDetails" :use-index="true" :table-data="fileData">
      <template #labelType="{ row }">
        <div>
          {{ labelType(row) }}
        </div>
      </template>
      <template #isScanConfirm="{ row }">
        <div>
          {{ isScanConfirm(row) }}
        </div>
      </template>
      <template #labelId="{ row }">
        <div class="click-row" @click="jump(row)">
          {{ row.labelId }}
        </div>
      </template>
    </wz-table>
  </el-dialog>
</template>

<script>
import { openAssetFull } from '@/api/material'

const YARD_MATERIAL_COLUMNS = [
    {
        label: '物料编码',
        prop: 'categoryCode',
        elProps: {
            'show-overflow-tooltip': true
        }
    },
    {
        label: '物料名称',
        prop: 'categoryName',
        elProps: {
            'show-overflow-tooltip': true
        }
    },
    {
        label: '资源资产编码',
        prop: 'resourceAssetCode',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '标签ID',
        prop: 'labelId',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '赋码贴签方式',
        prop: 'labelType',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '是否到货确认',
        prop: 'isScanConfirm',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '赋码贴签人',
        prop: 'labelUser',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '到货确认人',
        prop: 'scanConfirmUser',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '经纬度',
        prop: 'latitudeAndLongitude',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    }
]
const YARD_MATERIAL_COLUMNS_PROJECT = [
    {
        label: '子项目编码',
        prop: 'sonPrjCode',
        elProps: {
            'show-overflow-tooltip': true
        }
    },
    {
        label: '物料编码',
        prop: 'categoryCode',
        elProps: {
            'show-overflow-tooltip': true
        }
    },
    {
        label: '物料名称',
        prop: 'categoryName',
        elProps: {
            'show-overflow-tooltip': true
        }
    },
    {
        label: '资源资产编码',
        prop: 'resourceAssetCode',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '标签ID',
        prop: 'labelId',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '赋码贴签方式',
        prop: 'labelType',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '是否到货确认',
        prop: 'isScanConfirm',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '赋码贴签人',
        prop: 'labelUser',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '到货确认人',
        prop: 'scanConfirmUser',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '经纬度',
        prop: 'latitudeAndLongitude',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    }
]
import wzTable from '../components/cTable.vue'
import { newOpenPostWindow } from '@/utils/newRequestCommonFormjs'
import $ from 'jquery'
export default {
    name: 'MaterialOutDialog',
    components: { wzTable },
    props: {
        materialRemovalVisible: {
            type: Boolean,
            default: false
        },
        currentRow: {
            type: Object,
            default: () => ({ })
        },
        fileData: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            mcDetails: [],
            resourceCoding: [],
            assetsFileData: [],
            visible: false,
            url: '',
            token: '',
            userId: '',
            acctId: ''
        }
    },
    computed: {
        query() {
            return this.$route.query
        }
    },
    watch: {
        materialRemovalVisible: {
            handler(value) {
                this.visible = value
            },
            immediate: true
        },
        visible(value) {
            this.$emit('update:materialRemovalVisible', value)
        }
    },
    async mounted() {
        this.mcDetails = this.$route.query?.manageMode === '03' ? JSON.parse(JSON.stringify(YARD_MATERIAL_COLUMNS_PROJECT)) : JSON.parse(JSON.stringify(YARD_MATERIAL_COLUMNS))
        const openAssetFullRes = await openAssetFull()
        console.log(openAssetFullRes)
        if (+openAssetFullRes.code === 200) {
            this.url = openAssetFullRes.data.url
            this.token = openAssetFullRes.data.token
            this.userId = openAssetFullRes.data.userId
            this.acctId = openAssetFullRes.data.acctId
        }
    },
    methods: {
        labelType(row) {
            const keyValue = {
                1: 'PMS贴签赋码',
                2: '仓储贴签赋码'
            }
            return keyValue[+row.labelType]
        },
        isScanConfirm(row) {
            const keyValue = {
                0: '否',
                1: '是'
            }
            return keyValue[+row.isScanConfirm]
        },
        // 点击标签id跳转经分系统
        jump(row) {
            console.log(row)
            const toUrl = `${this.url}ctb_thematic_web/newTowerSkip/assetsRecordNew?res_id=${row.labelId}&resourceAssetCode=${row.resourceAssetCode}`
            const params = {}
            params.pwdaToken = this.token
            params.acctId = this.acctId
            params.userName = this.userId
            const newWin = window.open()
            const form = $("<form method='post'></form>")
            form.attr({ action: toUrl })
            $.each(params, function(key, value) {
                const input = $("<input type='hidden' >")
                input.attr({ name: key })
                input.val(value)
                form.append(input)
            })
            form.appendTo(newWin.document.body)
            form.submit()
        }
    }
}
</script>
<style lang="scss" scoped>
.mt-10 {
    margin-top: 10px;
}

.click-row {
    color: #53c7f8;
    cursor: pointer;
}
</style>
